import React, { useState, useEffect } from "react";
import "./home.css";
import Header from '../../components/header/header';
import Footer from '../../components/footer/footer';
import { render } from "@testing-library/react";
function Home() {
    let initialDragState = null;
    let initialRenderDragState = null;
    let initPos = {
        x:0,
        y:0
    };
    let initRenderList = [
        {
            id:'row0',
            img_url:"/img/mm3.jpg",
            img_alt:"图三"
        }
    ]

    let moduleLis = [
        {
            img_url:"/img/mm1.jpg",
            img_alt:"图一"
        },
        {
            img_url:"/img/mm2.jpg",
            img_alt:"图二"
        },
        {
            img_url:"/img/mm3.jpg",
            img_alt:"图三"
        },
        {
            img_url:"/img/mm4.jpg",
            img_alt:"图四"
        }
    ];
    
    let CL_MODULE = 'jsDragModule';
    let CL_DRAGENTER = 'dragenter';
    let CL_DRAGOVER = 'dragover';
    let CL_DRAGSTART = 'dragstart';

    const [elDrag, setElDrag] = useState(initialDragState);
    const [renderDrag, setRenderDrag] = useState(initialRenderDragState);
    const [pagePos,setPagePos] = useState(initPos);
    const [renderList,setRenderList] = useState(initRenderList);
    const [showHD,setShowHD] = useState(false);
    const [isRmEnter,setIsRmEnter] = useState(false);
    const [isOrder, setIsOrder] = useState(false);
    useEffect(() => {
        console.log("执行了");
    }, [])

    const dragModuleLi = (e) =>{
        let imgEl = e.target;
        let obj = {
            img_alt:imgEl.alt,
            img_url:imgEl.currentSrc
        }
        setRenderDrag(null);
        setElDrag(obj);
        e.dataTransfer.setData('text/plain', 'for firefox');
    };

    const dragModuleLiOver = (e) =>{
        e.preventDefault();
    }

    const dragModuleLiEnd = (e) =>{
        setElDrag(null)
        e.preventDefault();
    }


    const dragRenderItemStart =(e) =>{
        setRenderDrag(e.target);
        e.dataTransfer.setData('infos',e.target);
    };

    const moduleBodyDragOver = (e) =>{
        setPagePos(Object.assign(pagePos,{y:e.pageY,x:e.pageX}));
        if(renderDrag!=null && e.pageX<170 && !isOrder){
            setIsRmEnter(true);
        }
        e.preventDefault();
    }

    const dragRenderItemOver = (e) =>{
        let current = e.target;
        setIsOrder(false);
            //因为dragover会发生在ul上，所以要判断是不是li
        if (current.nodeName === "LI"&&current !== renderDrag) {
            if(renderDrag!=null){
                setIsOrder(true);
                if (_index(renderDrag) > _index(current)) {               
                     current.parentNode.insertBefore(renderDrag, current.nextSibling);  
                } else {
                    current.parentNode.insertBefore(renderDrag, current.target);
                }

            }
        }
        e.preventDefault();
    }

    const dragRenderItemEnter = (e) =>{
        e.preventDefault();
    }

    const onDragOverHD = (e) =>{
        e.preventDefault();
    }

    const onDragEnterHD = (e) =>{

    }
    const onDragDropHD =(e) =>{
        if(elDrag!=null){
            setRenderList([...renderList,elDrag]);
            setElDrag(null);
        }
        e.preventDefault();
    }

    const _index = (el) => {
        var index = 0;
        if (!el || !el.parentNode) {
            return -1;
        }
        while (el && (el = el.previousElementSibling)) {
            index++;
        }
        return index;
    }
    const onRmOver = (e) =>{
        e.preventDefault();
    }
    const onRmDrop = (e)=>{
        renderDrag.remove();
        setRenderDrag(null);
        setIsRmEnter(false);
    }
    const onRmEnter = (e) =>{
        setIsOrder(false);
    }
    return (
        <div>
            <Header></Header>
                <div id="main" onDragOver={(e)=>moduleBodyDragOver(e)}>
                    <div id="body" className="light">
                        <div id="content">
                            <div className="container">
                                <div className="demo">
                                    <ul id="module" className="module-ul">
                                        {moduleLis.map((item) =>
                                        <li key={item.img_alt} className="module-li" draggable="true" data-url={item.img_url} onDragStart={(e)=>dragModuleLi(e)}  onDragOver={(e)=>dragModuleLiOver(e)}  onDragEnd={(e)=>dragModuleLiEnd(e)}>
                                            <img className="module-img" src={item.img_url} height="96" alt={item.img_alt}/>
                                        </li>)}
                                    </ul>
                                    <div id="moduleRemove" onDragEnter={(e)=>onRmEnter(e)} onDragOver={(e)=>onRmOver(e)}  onDrop={(e)=>onRmDrop(e)}
                                        className={ isRmEnter === true?'module-remove show_left_drawer':'module-remove'}
                                    >
                                        <span className="module-remove-icon">×</span>
                                    </div>
                                    <div id="moduleBody" className="module-body">
                                        <ul id="moduleStage" className="module-stage" onDragStart={(e)=>dragRenderItemStart(e)}  onDragOver={(e)=>dragRenderItemOver(e)} onDragEnter={(e)=>dragRenderItemEnter(e) }>
                                            {renderList.map((item,index)=>
                                                <li key={'rid'+index} id={'rid'+index} className="jsDragModule module-drag" draggable="true" >
                                                    <div onDragStart={(e)=>e.preventDefault()} onDragOver={(e)=>e.preventDefault()} style={{display:'flex'}}>
                                                        <img className="module_render_item_img" src={item.img_url} height="384"/>
                                                        <div className="intro">
                                                            <div>有没有那么一首歌 ..</div>
                                                            <div>会让你轻轻跟着和 ..</div>
                                                            <div>随着我们生命起伏一起唱的主题歌……❤</div>
                                                        </div>
                                                    </div>
                                                </li>
                                            )}
                                        </ul>
                                        <div id="modulePlaHd" className="module-placeholder" onDragOver={(e)=>onDragOverHD(e)} onDragEnter={(e)=>onDragEnterHD(e)} onDrop={(e)=>onDragDropHD(e)}></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            <Footer></Footer>
        </div>
    );
};

export default Home;